<template>
  <div class="Setting-box">
    <div class="Setting-content">
      <van-nav-bar
        title="设置"
        left-text="返回"
        left-arrow
        @click-left="GoBack"
      >
        <template #right>
          <!-- <van-icon name="setting-o" size="18" /> -->
        </template>
      </van-nav-bar>
      <!-- 绑定用户名 -->
      <van-cell is-link @click="bindingShowPopup" >绑定用户名</van-cell>
      <van-popup v-model="show" round  class="box username-box">
        <h2>设置用户名</h2>
        <input type="text" placeholder="请输入用户名" class="input-text" v-model="username">
        <input type="button" value="更新" class="input-button" @click="toUpdata">
      </van-popup>
      <!-- 修改密码 -->
      <van-cell is-link @click="fixShowPopup" >修改密码</van-cell>
      <van-popup v-model="shows" round  class="box password-box">
        <h2>修改密码</h2>
        <input type="password" placeholder="旧密码" class="input-text" v-model="oldpassword">
        <input type="password" placeholder="新密码" class="input-text" v-model="newpassword">
        <input type="button" value="确认修改" class="input-button" @click="toFix">
      </van-popup>
      <van-button
        round
        type="info"
        size="large"
        class=""
        color="#f21e27"
        @click="getOut"
        >
        退出登录
        </van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Setting",
  data(){
    return {
      show: false,
      shows: false,
      username:"",
      oldpassword:"",
      newpassword:"",
    }
  },
  methods: {
    /* 点击返回 */
    GoBack() {
      this.$router.go(-1);
    },
    /* 点击退出登录 */
    getOut() {
      this.$router.push("/Login");
      localStorage.removeItem("token");
      localStorage.removeItem("userid");
      this.$toast.success("退出成功！");
    },
    bindingShowPopup() {
      this.show = true;
    },
    fixShowPopup(){
      this.shows = true;
    },
    /* 点击更新用户名 */
    toUpdata(){
      let token = localStorage.getItem("token");
      let userid = localStorage.getItem("userid");
      if (token){
        this.service({
          url: "/user/bindusername",
          headers: {token},
          params: {
            username: this.username
          }
        })
        .then ((res)=>{
          if (res.data.code == 200) {
            this.$toast.success("用户名更新成功！")
            setTimeout(()=>{
              this.$router.push("/My");
            },1000)
          }
        })
      }
    },
    /* 修改密码 */
    toFix(){
      let token = localStorage.getItem("token");
      let userid = localStorage.getItem("userid");
      if (token) {
        this.service({
          url: "/user/updatePassword",
          headers:{token},
          params:{
            userid,
            oldpassword:this.oldpassword,
            newpassword:this.newpassword,
          }
         /*  data:`userid=${userid}&oldpassword=${this.oldpassword}&newpassword=${this.newpassword}` */
        })
        .then ((res)=>{
          if (res.data.code == 200) {
            this.$toast.success("密码修改成功！")
            setTimeout(()=>{
              this.$router.push("Login");
            },1000)
          } 
          else if (res.data.code == 10030) {
            this.$toast.fail("原始密码错误！");
          } 
          else {
            this.$toast.fail("修改密码失败");
          }
        })
      } else {
        this.$toast.fail("请登录！");
        setTimeout(()=>{
          this.$router.push("/Login")
        },1000)
      }
    }
  },
};
</script>

<style scoped>
.box {
  width: 18.75rem;
  height: 12.5rem;
  margin-top: -3.125rem;
}
h2 {
  text-align: center;
  margin: 1.1375rem;
}
.input-text{
  padding: 0 1.625rem;
  width: 100%;
  border: 0;
  margin-bottom: .625rem;
}
.input-button{
  width: 100%;
  height: 2.875rem;
  border-radius: 1.875rem;
  color: white;
  background-color: #ee0a24;
  border: none;
  margin-top: 1.25rem;
}
</style>